import React from "react"

import LikeMusic_Navbar from "./likemusic_NavBar"
// import LikeMusic_Tabs from "./likemusic_Tabs"

import {get_like_music_id,get_gedan_details} from "../../../../api/index"

import queryString from "query-string"

import { NavBar, Icon } from 'antd-mobile';


class Likemusic extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      gedan_data:{},
      gedan_info:[],
      gedan_creator:{},
      like_first_pic:""
    }
  }

  componentDidMount(){
    console.log(this.props)
    let qr = queryString.parse(this.props.location.search)
    console.log(qr)
    get_gedan_details(qr.id)
    .then(body=>body.json())
    .then(res=>{
      console.log(res);
        this.setState({
          gedan_data:res.playlist,
          gedan_info:res.playlist.tracks,
          gedan_creator:res.playlist.creator,
          like_first_pic:res.playlist.coverImgUrl
      })
      console.log(this.state.like_first_pic);

    })
    
  }

  goPlayMusic(id){
    console.log(id)
  }

    render() {
        return (
            <div>
                <LikeMusic_Navbar></LikeMusic_Navbar>
                {/* <LikeMusic_Tabs></LikeMusic_Tabs> */}
                <div className="LikeMusic_Tabs">
                  <img src={this.state.like_first_pic} alt=""
                  style={{width:"120px",height:"120px"}}/>

                  <div className="img_right">
                    <h3>{this.state.gedan_data.name?this.state.gedan_data.name:"我喜欢的音乐"}</h3>

                    <div className="pic_name">
                      <img src={this.state.gedan_creator.avatarUrl} alt=""/>
                      <h3>{this.state.gedan_creator.nickname+">"}</h3>
                    </div>
                  </div>
                </div>

                <div className="pinglun">
                  <div className="pinglun_button">
                    <svg t="1574059078240" className="icon" viewBox="0 0 1031 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9386" width="40" height="40"><path d="M512 32C230.4 32 0 249.6 0 512c0 89.6 25.6 166.4 70.4 243.2l-38.4 128 0 0 0 0-12.8 51.2c-12.8 32 12.8 51.2 44.8 38.4l172.8-57.6c83.2 51.2 179.2 76.8 281.6 76.8 281.6 0 512-217.6 512-480S793.6 32 512 32zM512 896c-83.2 0-160-19.2-230.4-64l-38.4-25.6-44.8 12.8-57.6 19.2 19.2-64 12.8-38.4L147.2 704c-38.4-57.6-51.2-121.6-51.2-192 0-211.2 185.6-384 416-384s416 172.8 416 384S742.4 896 512 896z" p-id="9387" fill="#ffffff"></path><path d="M256 512m-64 0a1 1 0 1 0 128 0 1 1 0 1 0-128 0Z" p-id="9388" fill="#ffffff"></path><path d="M512 512m-64 0a1 1 0 1 0 128 0 1 1 0 1 0-128 0Z" p-id="9389" fill="#ffffff"></path><path d="M768 512m-64 0a1 1 0 1 0 128 0 1 1 0 1 0-128 0Z" p-id="9390" fill="#ffffff"></path></svg>
                    <span>评论</span>
                  </div>
                  <div className="pinglun_button">
                    <svg t="1574058715777" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3419" width="40" height="40"><path d="M511.998 64c21 0 38.1 17 38.1 38.1s-17 38.1-38.1 38.1c-205.4 0-371.9 166.5-371.9 371.9s166.5 371.8 371.9 371.8 371.9-166.5 371.9-371.9c0-21 17-38.1 38.1-38.1s38 17.1 38 38.1c0 247.4-200.6 448-448 448s-448-200.6-448-448 200.6-448 448-448z m230.6 190.5c-14.2-14.7-14-38 0.5-52.4 14.5-14.5 37.8-14.6 52.7-0.2l65.6 65.6c19.8 19.8 19.8 51.8 0 71.6l-65.6 65.6c-14.6 14.6-38.3 14.6-52.9 0-14.6-14.6-14.6-38.3 0-52.9l11.1-11.1h-48.3c-131.3 0-175.9 55.9-175.9 225 0 20.7-16.7 37.4-37.4 37.4s-37.4-16.7-37.4-37.4c0-209.1 76.3-299.8 250.7-299.8h48.3l-11.4-11.4z" p-id="3420" fill="#ffffff"></path></svg>
                    <span>分享</span>
                  </div>
                  <div className="pinglun_button">
                    <svg t="1574059027466" className="icon" viewBox="0 0 1049 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7994" width="40" height="40"><path d="M520.5248 74.9312c241.408 0 437.0944 195.6864 437.0944 437.0688 0 241.408-195.6864 437.0688-437.0944 437.0688C279.1424 949.0688 83.456 753.408 83.456 512c0-241.408 195.6864-437.0688 437.0688-437.0688z m0-74.9312c-282.752 0-512 229.2224-512 512s229.248 512 512 512c282.7776 0 512-229.2224 512-512s-229.2224-512-512-512z" p-id="7995" fill="#ffffff"></path><path d="M723.9424 577.92a31.8208 31.8208 0 0 0-0.64-44.7744 31.232 31.232 0 0 0-44.4416 0.64l-133.2736 139.4432V331.6992c0-17.664-14.208-32-31.744-32-17.536 0-31.744 14.336-31.744 32v346.0096l-146.6112-143.2832a31.5648 31.5648 0 0 0-43.0848 1.9968 32.1536 32.1536 0 0 0-1.3568 43.4176l221.5168 219.392 15.232-16 28.5696-28.7744 166.2976-173.312 1.28-3.2256z" p-id="7996" fill="#ffffff"></path></svg>
                    <span>下载</span>
                  </div>
                  <div className="pinglun_button">
                    <svg t="1574058838392" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5812" width="40" height="40"><path d="M512 995.555556C244.622222 995.555556 28.444444 779.377778 28.444444 512S244.622222 28.444444 512 28.444444s483.555556 216.177778 483.555556 483.555556-216.177778 483.555556-483.555556 483.555556z m0-910.222223C278.755556 85.333333 85.333333 278.755556 85.333333 512s193.422222 426.666667 426.666667 426.666667 426.666667-193.422222 426.666667-426.666667S745.244444 85.333333 512 85.333333z" p-id="5813" fill="#ffffff"></path><path d="M466.488889 637.155556L290.133333 455.111111c-11.377778-11.377778-34.133333-11.377778-39.822222 0-11.377778 11.377778-11.377778 28.444444 0 39.822222l199.111111 199.111111c5.688889 5.688889 11.377778 5.688889 22.755556 5.688889s17.066667 0 22.755555-5.688889l324.266667-324.266666c11.377778-11.377778 11.377778-28.444444 0-39.822222-11.377778-11.377778-28.444444-11.377778-39.822222 0l-312.888889 307.2z" p-id="5814" fill="#ffffff"></path></svg>
                    <span>多选</span>
                  </div>
                </div>

                <ul className="like_music_list" style={{}}>
                  {this.state.gedan_info.map((item,index)=><li key={item.id}
                    style={{zIndex:2}}
                    >
                    <h3 style={{marginRight:"20px"}}>{index+1}</h3>
                    <div>
                      <h3>{item.name}</h3>
                      <span>{item.ar[0].name}</span>
                      {/* <button style={{zIndex:2}} onClick={this.goPlayMusic.bind(this,item.id)}>播放</button> */}
                    </div>
                  </li>)}
                </ul>
            </div>
        )
    }
}

export default Likemusic